<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环渲染</title>
  <style>

  </style>
</head>

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <div><input type="text" v-model="todoNew">
      <!-- vue  事件绑定的语法： v-on:事件名=“函数名”  @click="函数名"-->
      <button type="button" v-on:click="addTodo">add todo</button>
    </div>
    <div class="todolist">
      <p v-for="todoItem in todolist">
        <span>{{todoItem.id}}</span> ------- <span>{{todoItem.todoName}}</span>
        <button type="button" @click="deleteTodo(todoItem.id, $event)">delete</button>
      </p>
    </div>

  </div>


  <script src=" ./js/vue.js">
  </script>
  <script>

    var vm = new Vue( {
      el: "#app",
      data: {
        msg: 'todolist案例',
        id: 0,
        todoNew: "",
        todolist: [

        ]
      },
      // vue里面方法的写法：
      methods: {
        // 1. 添加todo
        addTodo ( e ) {
          // console.log( e )
          // console.log( arguments[ 0 ] )
          // 操作Data中的数据
          // console.log( this.msg )
          // this.msg = "todotodo,"
          this.id = this.id + 1;
          this.todolist.push( { id: this.id, todoName: this.todoNew } )
          this.todoNew = ""
        },
        // 删除todo
        deleteTodo ( id, e ) {
          console.log( e )
          // console.log( this.todolist )
          /*
          push()
          pop()
          shift()
          unshift()
          splice()
          sort()
          reverse(), 都是直接修改源数组，可以实现页面的响应式。*/
          // this.todolist.forEach( ( el, i, arr ) => {
          //   if ( el.id === id ) {
          //     arr.splice( i, 1 )
          //   }
          // } );
          this.todolist = this.todolist.filter( el => {
            return el.id !== id;
          } )
          // console.log( this.todolist )

          /*
          filter(), concat(), slice(); 它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
          filter(),循环遍历数组成员，如果回调函数返回true,这把数组成员添加到新数组中； 循环结束后，filter()返回这个新数组。

          this.todolist = this.todolist.filter(el=>el.id!==id)
          */
        }
      }
    } );

  </script>
</body>

</html>